<template>
	<view class="pageAll">
		<view class="content">
			<view class="stepTitle">
				第四步
			</view>
			<view class="stepInfo">
				<label class="fromInputLabel">
					<input v-model="form.saveType" class="formFood" type="text" @focus="inputType" @blur="inputTypeBlur" @confirm="getNextInput('saveType')"  :focus="!myPalVisible.saveType" />
					<view v-if="myPalVisible.saveType" class="fromInputLabelText" @click="inputType">
						<text class="palLeft">{{placeholder.saveType.left}}</text>
						<text class="palRight">{{placeholder.saveType.right}}</text>
					</view>
				</label>
				<label class="fromInputLabel">
					<input v-model="form.shelfLife" class="formAddress" type="text" @focus="inputShelfLife" @blur="inputShelfLifeBlur" :focus="!myPalVisible.shelfLife" @confirm="getNextInput('shelfLife')"/>
					<view v-if="myPalVisible.shelfLife" class="fromInputLabelText" @click="inputShelfLife">
						<text class="palLeft">{{placeholder.shelfLife.left}}</text>
						<text class="palRight">{{placeholder.shelfLife.right}}</text>
					</view>
				</label>
			</view>
			<view class="updataImgGroup">
				<view class="updataImgTip">
					<text>上传样品图</text>
				</view>
				<view class="updataImg">
					<cross v-on:getImageTempPaths="getImageTempPaths" :cssClass="'food'" :tipText="'上传食材全身照'" :imgType="1" :imgPath="form.imgPath.wholeBody" />
					<cross v-on:getImageTempPaths="getImageTempPaths" :cssClass="'food'" :tipText="'上传食材内包装照'" :imgType="2" :imgPath="form.imgPath.innerPackaging" />
					<cross v-on:getImageTempPaths="getImageTempPaths" :cssClass="'food'" :tipText="'上传食材外包装照'" :imgType="3" :imgPath="form.imgPath.outerPackaging" />
				</view>
			</view>
			<view class="nextStep">
				<button @click="preStep">
					上一步
				</button>
				<button @click="saveDraft">
					存为草稿
				</button>
			</view>
		</view>
		<view class="bottomBtnView">
			<button class="bottomBtn" hover-class="subActive" @click="showReport">
				预览
			</button>
			<button class="bottomBtn" hover-class="subActive" @click="updata">
				上传
			</button>
		</view>
	</view>
</template>

<script>
	import cross from '../../../components/commonCom/cross.vue'
	import {
		uploadFile
	} from '@/utils/alioss.js'
	import {
		ValidateReport,
		AvoidDoubleClick,
		HBValidate
	} from '@/utils/tools.js'

	const avoidDoubleClick = new AvoidDoubleClick()

	export default {
		data() {
			return {
				form: {
					saveType: null,
					shelfLife: null,
					imgPath: {
						wholeBody: null,
						innerPackaging: null,
						outerPackaging: null,
					},
				},
				myPalVisible: {
					saveType: true,
					shelfLife: true,
				},
				placeholder: {
					saveType: {
						left: '请输入储存方式',
						right: '如: 冷藏-3°'
					},
					shelfLife: {
						left: '请输入保质期',
						right: '如: 十天'
					},
				},
				isWorking: false, // 防止用户多次点击
			}
		},
		methods: {
			// 上传图片到服务器
			toSaveImg(imageList) {
				return new Promise((resolve, reject) => {
					let i = 0
					let arr = Object.keys(imageList).length;
					for (let index in imageList) {
						if (imageList.hasOwnProperty(index)) {
							if (imageList[index]) {
								if (imageList[index].indexOf('https://hongbiao.oss-cn-hangzhou.aliyuncs.com/') === -1) {
									uploadFile(imageList[index])
										.then(res => {
											imageList[index] = res.data.url
											i++
											if (i === arr) {
												resolve()
											}
										})
										.catch(res => {
											uni.showToast({
												title: '图片上传失败'
											})
											reject()
										})
								} else {
									i++
									if (i === arr) {
										resolve()
									}
								}
							} else {
								arr--
								if (i === arr) {
									resolve()
								}
							}
						}
					}
				})
			},
			// 存储方式，模拟占位符显示与隐藏
			inputType() {
				this.myPalVisible.saveType = false
			},
			inputTypeBlur() {
				if (this.form.saveType) {
					this.myPalVisible.saveType = false
				} else {
					this.myPalVisible.saveType = true
				}
			},
			// 模拟占位符显示与隐藏
			inputShelfLife() {
				this.myPalVisible.shelfLife = false
			},
			inputShelfLifeBlur() {
				if (this.form.shelfLife) {
					this.myPalVisible.shelfLife = false
				} else {
					this.myPalVisible.shelfLife = true
				}
			},
			getNextInput(value) {
				this.$set(this.myPalVisible, value, false)
			},
			saveDraft() {
				const validateReport = new ValidateReport()

				// 如果存在值则对值进行校验， 否则不进行校验-----开始
				if (this.form.saveType) {
					if (!validateReport.vdItemNotNone(this.form.saveType, '储存方式')) {
						return false
					}
				}
				if (this.form.shelfLife) {
					if (!validateReport.vdItemNotNone(this.form.shelfLife, '保质期')) {
						return false
					}
				}
				if (this.form.imgPath.wholeBody) {
					if (!validateReport.vdItemNotNone(this.form.imgPath.wholeBody, '食材全身照')) {
						return false
					}
				}
				// 如果存在值则对值进行校验， 否则不进行校验-----结束

				if (avoidDoubleClick.isWork()) {
					return false
				}

				this.toSaveImg(this.form.imgPath)
					.then(() => {
						this.$store.commit('setCurrTag', 1)
						this.$store.commit('setReportDraft',  JSON.parse(JSON.stringify(this.form)))

						if (this.$store.getters.getReportDraft.id) {
							this.$api.selectDraftUpdate(
									this.$store.getters.getReportDraft
								)
								.then(res => {
									if (res.status) {
										uni.switchTab({
											url: '../foodReport/foodReport'
										})
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 1500,
										})
									}
									avoidDoubleClick.toRest()
								})
						} else {
							this.$api.selectDraft(
									this.$store.getters.getReportDraft
								)
								.then(res => {

									if (res.status) {
										uni.switchTab({
											url: '../foodReport/foodReport'
										})
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 1500,
										})
									}
									avoidDoubleClick.toRest()
								})
						}
					})
					.catch(err => {
						avoidDoubleClick.toRest()
					})


			},
			showReport() {
				const validateReport = new ValidateReport()

				// 如果存在值则对值进行校验， 否则不进行校验-----开始
				if (this.form.saveType) {
					if (!validateReport.vdItemNotNone(this.form.saveType, '储存方式')) {
						return false
					}
				}
				if (this.form.shelfLife) {
					if (!validateReport.vdItemNotNone(this.form.shelfLife, '保质期')) {
						return false
					}
				}
				if (this.form.imgPath.wholeBody) {
					if (!validateReport.vdItemNotNone(this.form.imgPath.wholeBody, '食材全身照')) {
						return false
					}
				}
				// 如果存在值则对值进行校验， 否则不进行校验-----结束

				if (avoidDoubleClick.isWork()) {
					return false
				}

				this.toSaveImg(this.form.imgPath)
					.then(() => {

						avoidDoubleClick.toRest()

						this.$store.commit('setReportDraft',  JSON.parse(JSON.stringify(this.form)))
						uni.navigateTo({
							url: '../foodPreview/foodPreview',
						})
					})
					.catch(err => {
						avoidDoubleClick.toRest()
					})


			},
			getImageTempPaths(value) {
				if (value.type === 1) {
					this.form.imgPath.wholeBody = value.img
				} else if (value.type === 2) {
					this.form.imgPath.innerPackaging = value.img
				} else {
					this.form.imgPath.outerPackaging = value.img
				}
			},
			preStep() {
				const validateReport = new ValidateReport()
				
				// 如果存在值则对值进行校验， 否则不进行校验-----开始
				if (this.form.saveType) {
					if (!validateReport.vdItemNotNone(this.form.saveType, '储存方式')) {
						return false
					}
				}
				if (this.form.shelfLife) {
					if (!validateReport.vdItemNotNone(this.form.shelfLife, '保质期')) {
						return false
					}
				}
				if (this.form.imgPath.wholeBody) {
					if (!validateReport.vdItemNotNone(this.form.imgPath.wholeBody, '食材全身照')) {
						return false
					}
				}
				// 如果存在值则对值进行校验， 否则不进行校验-----结束
				
				this.$store.commit('setCurrTag', 1)
				this.$store.commit('setReportDraft',  JSON.parse(JSON.stringify(this.form)))
				uni.navigateBack({
					url: '../thirdStep/thirdStep'
				})
			},
			nextStep() {

			},
			updata() {
				const validateReport = new ValidateReport()
				if (validateReport.vdItemNotNone(this.form.saveType, '储存方式') 
					&& validateReport.vdItemNotNone(this.form.shelfLife,'保质期') 
					&& validateReport.vdItemNotNone(this.form.imgPath.wholeBody, '食材全身照') 
					&& validateReport.vdItemNotNone(this.form.imgPath.innerPackaging, '食材内包装照') 
					&& validateReport.vdItemNotNone(this.form.imgPath.outerPackaging, '食材外包装照')) {

					if (avoidDoubleClick.isWork()) {
						return false
					}

					this.toSaveImg(this.form.imgPath)
						.then(() => {
							this.$store.commit('setReportDraft',  JSON.parse(JSON.stringify(this.form)))
							this.$api.selectSubmit(
									this.$store.getters.getReportDraft
								)
								.then(res => {
									if (res.status) {
										uni.showToast({
											title: '上传成功',
											duration: 1000,
											icon: 'success'
										})
										if (this.$store.getters.getReportDraft.id) {
											this.$api.submissionDelete({
												id: this.$store.getters.getReportDraft.id
											}).then(res => {})
										}
										setTimeout(() => {
											uni.switchTab({
												url: '../foodReport/foodReport'
											})
										}, 1000)
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 1500,
										})
									}
									avoidDoubleClick.toRest()
								})
						})
						.catch(err => {
							avoidDoubleClick.toRest()
						})
				}
			},
			getFormInfo() {
				const tempForm = this.$store.getters.getReportDraft
				this.$set(this.form, 'saveType', tempForm.environment ? tempForm.environment : '')
				this.$set(this.form, 'shelfLife', tempForm.shelf_life ? tempForm.shelf_life : '')
				this.$set(this.form.imgPath, 'wholeBody', tempForm.all_photo ? tempForm.all_photo : '')
				this.$set(this.form.imgPath, 'innerPackaging', tempForm.inside_photo ? tempForm.inside_photo : '')
				this.$set(this.form.imgPath, 'outerPackaging', tempForm.external_photo ? tempForm.external_photo : '')
				for (const index in this.form) {
					if (this.form[index]) {
						this.myPalVisible[index] = false
					}
				}
			}
		},
		components: {
			cross,
		},
		onLoad() {
			this.getFormInfo()
		},
		onShareAppMessage: (options) => {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "红标HONBIAO", // 默认是小程序的名称(可以写slogan等)
				path: '/pages/indexPage/authorization/authorization', // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '/static/index/labelRouge.png', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: (res) => {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: () => {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj
		},
	}
</script>

<style scoped>
	.pageAll {
		box-sizing: border-box;
		background-color: #fdf5f3;
		width: 100%;
		height: 100%;
		padding: 17upx;
		display: inline-block;
	}

	.content {
		box-shadow: 0 0 20upx 5upx rgba(240, 41, 41, 0.1);
		background-color: #FFF;
		padding: 22upx;
		height: 686.66upx;
		border-radius: 10upx;
	}

	.stepTitle {
		font-size: 36upx;
		color: #f7533e;
		text-align: center;
		letter-spacing: 10upx;
		padding: 10upx 0;
		font-weight: bold;
		box-sizing: border-box;
	}

	.stepInfo {
		font-size: 32upx;
		color: #6f6f6f;
		margin-top: 17upx;
	}

	.formFood {
		background: #fdf7f6;
		padding: 0 20upx;
		border: 1px solid #f2f2f2;
		border-radius: 10upx;
		margin-bottom: 17upx;
		height: 95.33upx;
	}

	.formAddress {
		background: #fdf5f3;
		padding: 0 20upx;
		border: 1px solid #f2f2f2;
		border-radius: 10upx;
		margin-bottom: 17upx;
		height: 95.33upx;
	}

	.fromQuality {
		background: #fdf7f6;
		padding: 25upx 20upx 0 20upx;
		border: 1px solid #f2f2f2;
		border-radius: 10upx;
		margin-bottom: 17upx;
		width: auto;
		height: 321.33upx;
	}

	.fromInputLabel {
		position: relative;
		display: block;
	}

	.fromInputLabel .fromInputLabelText {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		line-height: 95.33upx;
		padding: 0 20upx;
		width: 100%;
	}

	.fromInputLabelText text {
		display: inline-block;
	}

	.fromInputLabelText .palLeft {
		width: 67%;
	}

	.nextStep {
		text-align: center;
		margin-top: 60upx;
		display: flex;
	}

	.nextStep button:first {
		margin-left: 140upx;
	}

	.nextStep button {
		width: 140upx;
		height: 52upx;
		line-height: 52upx;
		color: #6f6f6f;
		font-size: 32upx;
		background-color: #fdf5f3;
		padding: 0;
	}

	.nextStep button:active {
		background-color: #fdf7f6;
	}

	.nextStep button:after {
		border: 1upx solid #eeeeee;
	}

	.bottomBtnView {
		text-align: center;
		margin-top: 100upx;
		display: flex;
	}

	.bottomBtn {
		width: 140upx;
		height: 52upx;
		line-height: 52upx;
		color: #6f6f6f;
		font-size: 32upx;
		background-color: #ff0000;
		color: #FFF;
		padding: 0;
		letter-spacing: 20upx;
		text-indent: 20upx;
	}

	.bottomBtn:first-child {
		margin-left: 120upx;
	}

	.bottomBtn:last-child {
		margin-right: 120upx;
	}

	.subActive {
		background-color: #c90000 !important;
	}

	.placeholderClass {
		font-size: 32upx;
		color: #6f6f6f;
	}

	.updataImgGroup {
		margin-top: 17upx;
	}

	.updataImgTip {
		font-size: 32upx;
		color: #6f6f6f;
		padding-left: 17upx;
	}

	.updataImg {
		margin-top: 12upx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
</style>
